<template>
  <je-modal
    v-model:visible="visibleModule"
    width="460px"
    :title="$t('exportTableModal.title')"
    class="modal-export"
    height="auto"
    :resize="false"
    :maximizable="false"
    :ok-button="addModule"
    cancel-button
    @close="cancelModal"
  >
    <je-form layout="vertical">
      <je-form-item
        label-align="top"
        :label="$t('exportTableModal.titleLabel')"
        v-bind="validateInfos.title"
      >
        <je-input v-model:value="modelRef.title" />
      </je-form-item>
      <je-form-item
        label-align="top"
        :label="$t('exportTableModal.fileNameLabel')"
        v-bind="validateInfos.fileName"
      >
        <je-input v-model:value="modelRef.fileName" />
      </je-form-item>
      <je-form-item
        label-align="top"
        :label="$t('exportTableModal.exportTypeLabel')"
        v-bind="validateInfos.exportType"
      >
        <je-radio-group v-model:value="modelRef.exportType" name="exportType">
          <je-radio value="NOWPAGE">{{ $t('exportTableModal.radioNowpage') }}</je-radio>
          <je-radio value="SELECTION">{{ $t('exportTableModal.radioSelection') }}</je-radio>
          <je-radio value="ALL">{{ $t('exportTableModal.radioAll') }}</je-radio>
        </je-radio-group>
      </je-form-item>
    </je-form>
  </je-modal>
</template>
<script>
  import { defineComponent, ref, reactive } from 'vue';
  import { Input, Modal, Radio, Form } from '@jecloud/ui';
  import { downloadKey } from '../../../api/index';
  import { dateFormat, encode, getAxiosBaseURL } from '@jecloud/utils';
  import { verifyData } from '../../../helper/common';

  const useForm = Form.useForm;
  export default defineComponent({
    name: 'DesignExport',
    components: {
      JeModal: Modal,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeRadio: Radio,
      JeRadioGroup: Radio.Group,
    },
    props: {
      modalShow: {
        type: Boolean,
        default: false,
      },
      modalData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      parentTable: Object,
    },
    emits: ['changeData'],
    setup(props, { emit }) {
      //保存模块数据，关闭弹窗
      const visibleModule = ref(props.modalShow);
      const tableData = reactive(props.modalData);
      const modelRef = reactive({
        title: tableData.RESOURCETABLE_TABLENAME,
        fileName:
          tableData.RESOURCETABLE_TABLENAME +
          '表信息_' +
          dateFormat(new Date(), 'YYYY-MM-DD') +
          '.xls',
        exportType: 'NOWPAGE',
      });
      const cancelModal = () => {
        visibleModule.value = false;
        emit('changeData', 'cancel');
      };
      const rulesRef = reactive({
        title: [verifyData.required, verifyData.lengthMax],
        fileName: [verifyData.required, verifyData.lengthMax],
      });
      const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
        onValidate: (...args) => {},
      });
      // 保存数据
      const addModule = ({ $modal, button }) => {
        const modal = $modal,
          btn = button;
        btn.loading = true;
        validate()
          .then(() => {
            const j_query = [
              {
                code: 'TABLECOLUMN_RESOURCETABLE_ID',
                type: '=',
                value: tableData.JE_CORE_RESOURCETABLE_ID,
                cn: 'and',
              },
            ];
            //当前页
            const ids = [];
            if (modelRef.exportType == 'NOWPAGE') {
              const fullData = props.parentTable.getTableData().fullData;
              fullData.forEach((item) => {
                ids.push(item.JE_CORE_TABLECOLUMN_ID);
              });
            } else if (modelRef.exportType == 'SELECTION') {
              const checkboxRecords = props.parentTable.getCheckboxRecords();
              checkboxRecords.forEach((item) => {
                ids.push(item.JE_CORE_TABLECOLUMN_ID);
              });
              if (ids.length <= 0) {
                // 没有选中数据
                Modal.alert('请选中数据！', 'warning');
                btn.loading = false;
                return;
              }
            }
            if (ids.length > 0) {
              j_query.push({
                code: 'JE_CORE_TABLECOLUMN_ID',
                type: 'in',
                value: ids,
                cn: 'and',
              });
            }
            const params = {
              title: modelRef.title,
              fileName: modelRef.fileName,
              tableCode: 'JE_CORE_TABLECOLUMN',
              funcId: '296fabef-573a-4953-bfbe-aca2f1864a20',
              styleType: 'GRID',
              j_query,
            };
            downloadKey({ data: encode(params) })
              .then((data) => {
                const url = getAxiosBaseURL() + '/je/meta/excel/exp?key=' + data.data;
                window.open(url);
                btn.loading = false;
                modal.close();
                emit('changeData');
              })
              .catch((e) => {
                btn.loading = false;
                Modal.alert(e.message, 'error');
              });
          })
          .catch((error) => {
            btn.loading = false;
          });
        return false;
      };
      return {
        validateInfos,
        resetFields,
        modelRef,
        cancelModal,
        visibleModule,
        addModule,
        centered: true,
      };
    },
  });
</script>
<style lang="less" scoped>
  .modal-export {
  }
</style>
